<template>

  <div>

    <div v-if="breakShow" style=" cursor: pointer; padding: 20px 20px 0px 20px" @click="toExam">
      <el-alert
        :closable="false"
        title="您有正在进行的考试，离线太久考试将被作废哦，点击此处可继续考试！"
        type="error"
      />
    </div>

    <el-card
      style="max-width: 100%; margin: 0 auto;"
      v-if="examFail"
    >
      <div slot="header">
        <span>考试失败</span>
      </div>
      <div style="text-align: center; padding: 20px;">
        <el-alert title="本次考试失败，请重新申请。" type="error" :closable="false"/>
      </div>
    </el-card>



    <data-table
      ref="pagingTable"
      v-if="!examFail"
      :options="options"
      :list-query="listQuery"
      @list-loaded="listLoaded"
    >
      <template #filter-content>

        <el-select v-model="listQuery.params.openType" class="filter-item" placeholder="开放类型" clearable>
          <el-option
            v-for="item in openTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-input v-model="listQuery.params.title" placeholder="搜索考试名称" style="width: 200px;" class="filter-item" />

      </template>

      <template #data-columns>

        <el-table-column
          label="考试名称"
          prop="title"
          show-overflow-tooltip
        />

        <el-table-column
          label="考试类型"
          align="center"
        >
          <template v-slot="scope">
            {{ scope.row.openType | examOpenType }}
          </template>

        </el-table-column>

        <el-table-column
          label="考试时间"
          width="220px"
          align="center"
        >

          <template v-slot="scope">
            <span v-if="scope.row.timeLimit">
              {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
            </span>
            <span v-else>不限时</span>
          </template>

        </el-table-column>

        <el-table-column
          label="考试时长"
          align="center"
        >

          <template v-slot="scope">
            {{ scope.row.totalTime }}分钟
          </template>

        </el-table-column>

        <el-table-column
          label="考试总分"
          prop="totalScore"
          align="center"
        />

        <el-table-column
          label="及格线"
          prop="qualifyScore"
          align="center"
        />

        <el-table-column
          label="考试次数"
          align="center"
        >

          <template v-slot="scope">
            {{ scope.row.examCount }}次
          </template>
        </el-table-column>

        <el-table-column
          label="考试状态"
          align="center"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.examStatus===0" type="danger">未考试</el-tag>
            <el-tag v-if="scope.row.examStatus===1" type="warning">考试中</el-tag>
            <el-tag v-if="scope.row.examStatus===2" type="success">通过</el-tag>
            <el-tag v-if="scope.row.examStatus===3" type="info">未通过</el-tag>
          </template>
        </el-table-column>


        <el-table-column
          label="操作"
          align="center"
          v-if="!examFail"
        >
          <template v-slot="scope">
            <el-button
              v-if="scope.row.state===0 && scope.row.allowExam"
              icon="el-icon-caret-right"
              type="primary"
              size="mini"
              :disabled="scope.row.examCount >= 3"
              @click="handlePre(scope.row.id)"
            >
              去考试
            </el-button>

            <el-tag v-if="scope.row.state===0 && !scope.row.allowExam" type="warning">
              先完成上场考试
            </el-tag>

            <el-button v-if="scope.row.state===1" icon="el-icon-s-release" size="mini" disabled>已禁用</el-button>
            <el-button v-if="scope.row.state===2" icon="el-icon-s-fold" size="mini" disabled>待开始</el-button>
            <el-button v-if="scope.row.state===3" icon="el-icon-s-unfold" size="mini" disabled>已结束</el-button>
          </template>

        </el-table-column>

      </template>

    </data-table>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import {checkProcess} from '@/api/paper/exam'
import {applyExamList,} from '@/api/paper/exam'

export default {
  components: {DataTable},
  data() {
    return {
      // 考试失败
      examFail: false,
      breakShow: false,
      breakId: '',
      openTypes: [
        {
          value: 1,
          label: '完全开放'
        },
        {
          value: 2,
          label: '定向考试'
        }
      ],

      listQuery: {
        current: 1,
        size: 10,
        params: {}
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/exam/api/exam/exam/online-paging'
      },
      dataList: null
    }
  },

  created() {
    this.check()
  },
  methods: {
    listLoaded(dataList) {
      this.tableData = dataList
      // allowExam 是否全为false
      this.examFail = dataList.records.every(item => !item.allowExam)
    },

    // 开始考试
    handlePre(examId) {
      //这里判断 是否有考试资格--申请通过

      let listQuery = {
        current: 1,
        size: 10,
        params: {
          userName: this.$store.state.user.name
        }
      }
      // applyExamList(parans).then(res => {
      //   const { records, total } = res.data

      // }).catch(() => {

      // })
      // this.$router.push({ name: 'PreExam', params: { examId: examId }})
      applyExamList(listQuery).then(res => {
        const {records, total} = res.data

        if (records && records.length > 0) {
          const first = records[0]
          if (first.isApply === '1') {

            this.$router.push({name: 'PreExam', params: {examId: examId}})
          } else {
            this.$message.warning('请先通过考试申请的审批后再进行考试')
          }
        } else {
          this.$message.info('暂无申请记录，请先提交考试申请')
        }
      }).catch(() => {
        this.$message.error('获取申请信息失败')
      })

    },

    // 继续考试
    toExam() {
      this.$router.push({name: 'StartExam', params: {id: this.breakId}})
    },

    // 检查进行中的考试
    check() {
      checkProcess().then(res => {
        if (res.data && res.data.id) {
          this.breakShow = true
          this.breakId = res.data.id
        }
      })
    }
  }
}
</script>
